import { Link } from '@brillout/docpress'
import { ConfigSpec } from '../../components'

<ConfigSpec
  env="client"
  cumulative={false}
/>

You can use the `onHydrationEnd()` hook to implement initialization that needs to be executed once the page has finished <Link href="/hydration">hydrating</Link>.

> The `onHydrationEnd()` hook requires <Link href="/client-routing">Client Routing</Link>.

```ts
// /pages/+onHydrationEnd.ts
// Environment: client

export { onHydrationEnd }

import type { PageContextClient } from 'vike/types'

// The onHydrationEnd() hook is called after the onRenderClient() hook finishes rendering the
// first page the user navigates to. (The onHydrationEnd() hook isn't called upon subsequent
// page navigation.)
async function onHydrationEnd(pageContext: PageContextClient) {
  console.log('The page is now interactive')
}
```


## See also

- <Link href="/client" />
- <Link href="/onAfterRenderClient" />
- <Link href="/onBeforeRenderClient" />
- <Link href="/onPageTransitionStart" />
- <Link href="/onPageTransitionEnd" />
- <Link href="/hooks" />
